<template>
  <div class="app-container">
    <!-- 添加或修改请假业务对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="申请人" prop="applicant">
        <user-select v-model="form.applicant" placeholder="请选择申请人" :max-show="1" disabled></user-select>
      </el-form-item>
      <el-form-item label="申请单位" prop="applicantUnit">
        <treeselect v-model="form.applicantUnit" :options="deptOptions" :show-count="true"
                    placeholder="请选择申请单位" disabled/>
      </el-form-item>
      <el-form-item label="被导出人" prop="exportedPerson">
        <person-select v-model="form.exportedPerson" placeholder="请选择被导出人" disabled></person-select>
      </el-form-item>
      <el-form-item label="档案类型" prop="fileType">
        <el-tree
            ref="docTree"
            empty-text="请现选择被导出人"
            :data="docOptions"
            default-expand-all
            show-checkbox
            node-key="id"
            :props="defaultProps">
        </el-tree>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请时间" prop="applicantDate">
            <el-date-picker clearable size="small" style="width: 100%"
                            v-model="form.applicantDate"
                            type="date"
                            disabled
                            value-format="yyyy-MM-dd"
                            placeholder="选择申请时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到期时间" prop="endDate">
            <el-date-picker clearable size="small" style="width: 100%"
                            v-model="form.endDate"
                            type="date"
                            disabled
                            value-format="yyyy-MM-dd"
                            placeholder="选择到期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" disabled placeholder="无"/>
      </el-form-item>
    </el-form>
    <div v-show="parentTaskId===null" class="dialog-footer" style="text-align:center">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify ref="verifyRef" :taskId="taskId" @submitCallback="submitCallback"
            :taskVariables="taskVariables" :sendMessage="sendMessage"></verify>
  </div>
</template>

<script>
import verify from "@/components/Process/Verify";
import UserSelect from "@/components/UserSelect/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import PersonSelect from "@/components/PersonSelect/index.vue";
import {getExport} from "@/api/business/export";
import {treeselect} from "@/api/system/dept";
import {personFileTree} from "@/api/business/personFile";

export default {
  name: "IntranetExport",
  dicts: ['bs_leave_type'],
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String // 任务id
  },
  created() {
    treeselect().then(response => {
      this.deptOptions = response.data;
    });
  },
  components: {
    verify, Treeselect, UserSelect, PersonSelect
  },
  data() {
    return {
      // 流程实例
      processInstanceId: '',
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 内网导出表格数据
      exportList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 部门树选项
      deptOptions: [],
      docOptions: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        applicant: [
          {required: true, message: "申请人不能为空", trigger: "blur"}
        ],
        applicantUnit: [
          {required: true, message: "申请单位不能为空", trigger: "blur"}
        ],
        exportedPerson: [
          {required: true, message: "申请单位不能为空", trigger: "blur"}
        ],
        applicantDate: [
          {required: true, message: "申请时间不能为空", trigger: "blur"}
        ],
        endDate: [
          {required: true, message: "到期时间不能为空", trigger: "blur"}
        ],
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},
      defaultProps: {
        children: "children",
        label: "label",
        disabled: (data, node) => {
          return true
        }
      },
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler(newVal) {
        if (newVal) {
          this.getById()
        }
      }
    },
    'form.exportedPerson': function (newVal, oldVal) {
      if (newVal) {
        this.getDocOptions(newVal);
      } else {
        this.docOptions = []
      }
    }
  },
  methods: {
    getDocOptions(personId) {
      personFileTree(personId).then(response => {
        this.docOptions = response.data;
        let fileTypeIds = this.form.fileType.split(',');
        this.$refs.docTree.setCheckedKeys(fileTypeIds)
      })
    },
    submitCallback() {
      this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getExport(this.businessKey)
      this.form = data;
    },
    /** 提交按钮 */
    submitForm() {
      getExport(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userId: 1
        };
        this.sendMessage = {
          title: '内网导出申请',
          messageContent: '单据【' + this.form.id + "】申请"
        }
      });
      this.$refs.verifyRef.visible = true
      this.$refs.verifyRef.reset()
    }
  }
};
</script>

<style scoped>

</style>
